<template>
  <el-row :gutter="15" class="panel-group">
    <el-col :xs="24" :sm="24" :lg="24" class="card-panel-col">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="f16 fb"><i class="el-icon-data-analysis fb f18 text-blue mr5" />招聘进展</span>
        </div>
        <el-row v-if="dataBody">
          <el-col :xs="24" :sm="24" :lg="8">
            <div class="fl">
              <div class="progress-wrap">
                <el-progress type="circle" :percentage="dataBody.planCount?parseFloat((dataBody.alreadyEntryCount/dataBody.planCount*100).toFixed(2)):0" :width="100" :stroke-width="12" />
              </div>
              <p class="text-999 progress-text f12">招聘完成率</p>
            </div>
            <div class="fl ml20 mt5">
              <div class="f16">
                <span>在招职位：</span>
                <span class="text-red f30">{{ dataBody.onLineJobCount }}</span>
              </div>
              <div class="f14 mt15">
                <span class="text-999">计划招聘人数：</span>
                <span class="text-blue">{{ dataBody.planCount }}</span>
              </div>
              <div class="f14 mt10">
                <span class="text-999">待招人数：</span>
                <span class="text-blue">{{ dataBody.surplusCount }}</span>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="16">
            <el-row class="statis-panel">
              <el-col :xs="8" :sm="8" :lg="8">
                <ul>
                  <li>
                    <label class="item-name">筛选简历</label>
                    <span class="item-count">{{ dataBody.screenCount }}</span>
                  </li>
                  <li>
                    <label class="item-name">已面试</label>
                    <span class="item-count">{{ dataBody.alreadyInterviewCount }}</span>
                  </li>
                </ul>
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8">
                <ul>
                  <li>
                    <label class="item-name">初筛通过</label>
                    <span class="item-count">{{ dataBody.firstStepScreenCount }}</span>
                  </li>
                  <li>
                    <label class="item-name">已发offer</label>
                    <span class="item-count">{{ dataBody.alreadyNoticeCount }}</span>
                  </li>
                </ul>
              </el-col>
              <el-col :xs="8" :sm="8" :lg="8">
                <ul>
                  <li>
                    <label class="item-name">邀约面试</label>
                    <span class="item-count">{{ dataBody.interviewCount }}</span>
                  </li>
                  <li>
                    <label class="item-name">已入职</label>
                    <span class="item-count">{{ dataBody.alreadyEntryCount }}</span>
                  </li>
                </ul>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { statisticsProgress } from '@/api/charts'
export default {
  components: {
  },
  data() {
    return {
      dataBody: null
    }
  },
  created() {
    statisticsProgress().then(response => {
      this.dataBody = response.result
      console.log(response)
    })
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  .box-card{
    height: 220px;
    border-bottom: 0;
    .progress-wrap{
      width: 100px;
      height: 100px;
      position: relative;
    }
    .progress-text{
      width: 100px;
      text-align: center;
    }
    .statis-panel{
      ul{
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 20px;
        margin-top: 30px;
        li{
          margin-bottom: 15px;
        }
        .item-name{
          color: #999;
          font-size: 14px;
          display: inline-block;
          width: 80px;
        }
        .item-count{
          font-size: 20px;
        }
      }
    }
  }
}
</style>
